<template>

  <div class="ol">
    <div class="hd">
      <span @click="$router.go(-1)"> 返回 </span>
      全部订单
    </div>
    <md-tabs
      :titles="titles"
      :default-index="0"
      show-ink-bar
      style="height: 100%;"
    >
      <div slot="title"
           slot-scope="props">
        {{props.title}}
      </div>
      <div v-for="(v,index) of alllist">

        <div class="orderlist">
          <div class="oitem state1" v-for="item of v.orderlist" :key="item.oid" @click="toorder(item.oid)">
            <div class="clearfix">
              <span class="fl">
                {{item.car.name}} <span v-if="item.type>5">(机场专线)</span>
              </span>
              <span class="fr state" v-if="item.state===0">待支付</span>
              <span class="fr state" v-if="item.state===1">等待确认订单</span>
              <span class="fr state" v-if="item.state===2">使用中</span>
              <span class="fr state" v-if="item.state===3">订单审核中</span>
              <span class="fr state" v-if="item.state===4">有违章待处理</span>
              <span class="fr state" v-if="item.state===5">订单完成</span>
              <span class="fr state" v-if="item.state===-1">已取消</span>
            </div>
            <div class="clearfix">
              <span class="fl" style="font-size: 12px;color:#666">
                {{item.car.sits}}座
                <template v-if="item.car.type==1">小轿车</template>
                <template v-if="item.car.type==2">越野车</template>
                <template v-if="item.car.type==3">商务车</template>
                {{item.car.pl}}</span>
            </div>

            <div style="line-height: 20px;margin-top: 10px;padding-bottom:5px;border-bottom:1px solid #999">
              <div style="font-size: 12px;" class="clearfix"> <span style="color:#333" class="fl">用车时间</span> <span class="fr">{{ new Date().setTime(item.s_date) |moment('YYYY-MM-DD hh:mm')}} </span> </div>

              <div style="font-size: 12px;" class="clearfix" v-show="item.type<4">
                <span style="color:#333" class="fl" v-if="item.state<=2">预计还车时间</span>
                <span style="color:#333" class="fl" v-if="item.state>2">还车时间</span>
                <span class="fr" v-if="item.state<=2" >{{ new Date().setTime(item.e_date) |moment('YYYY-MM-DD hh:mm')}} </span>
                <span class="fr" v-if="item.state>2" >{{ new Date().setTime(item.return_time) |moment('YYYY-MM-DD hh:mm')}} </span>
              </div>
            </div>
            <div class="clearfix" style="line-height: 30px;font-size: 12px;">
              <span class="fl" v-if="item.state===2"> </span>
              <span class="fr">费用:{{item.fee}}元</span>
            </div>
            <div style="margin-top: 5px;" class="clearfix">
              <span class="fl"></span>
              <div class="fr">
                <div class="cbtn obtn">联系客服</div>
                <div class="abtn obtn" v-if="item.state===0">支付</div>
                <div class="abtn obtn" v-if="item.state===1">查看</div>
                <div class="abtn obtn" v-if="item.state===2">查看</div>
                <div class="abtn obtn" v-if="item.state===3">查看</div>
                <div class="abtn obtn" v-if="item.state===5">查看</div>
                <div class="abtn obtn" v-if="item.state===4">处理违章</div>
                <div class="abtn obtn" v-if="item.state===-1">已取消</div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </md-tabs>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data () {
    return {
      titles: [
        {title: '全部'},
        {title: '待支付'},
        {title: '已完成'}
      ],
      all: [],
      needpay: [],
      done: [],
      alllist: []
    }
  },
  beforeMount: async function () {
    this.getlist()
  },
  methods: {
    getlist: async function () {
      let res = await this.$api.post('/orderlist', {uid: this.$store.state.wxuser.uid})
      if (res.data.state) {
        this.all = res.data.data
        let _needpay = []
        let _done = []
        for (let v of res.data.data) {
          if (v.state === 0) {
            _needpay.push(v)
          }
          if (v.state >= 1) {
            _done.push(v)
          }
        }

        this.alllist = [
          {orderlist: res.data.data},
          { orderlist: res.data.data.filter(r => r.state === 0) },
          { orderlist: res.data.data.filter(r => r.state === 5) }
        ]
      }
    },
    toorder: async function (oid) {
      this.$router.push({name: 'OrderDetail', params: {oid: oid}})
    }
  }
}
</script>

<style scoped>
  .ol{

  }
  .oitem{
    padding:10px;
    position: relative;
    background: #fff;
    margin-bottom: 10px;
  }
  .state1:before{
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: #6a78d0;
    position: absolute;
    left: 0;
    top:0
  }
  .orderlist{
    padding:10px;
    background: rgb(244,243,248);
    height: 100%;
  }
  .state{
    color:#6a78d0
  }
  .obtn{
    float:left;
    margin-right: 5px;
    width: 85px;
    height: 30px;
    color:#fff;
    line-height: 30px;
    text-align: center;
    font-size: 12px;

  }
  .abtn{
    background: -webkit-linear-gradient(top left,#6a78d0,#7986db);
  }
  .cbtn{
    background: -webkit-linear-gradient(top left,#080808,#4a4a51);
  }
</style>
